<?php include_once 'header.php';?>

<aside class="right-side">

	<section class="content-header">
		<h1>
			Dashboard <small>Website Statistics</small><small
				style='text-align: right; color: red; margin-left: 120px;'><?php if(isset($error)){echo $error;}?></small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
			<li class="active">Dashboard</li>
		</ol>
	</section>


	<section class="content">
		<div class="row">
			<div class="col-lg-3 col-xs-6">
				<div class="small-box bg-aqua">
					<div class="inner">
						<h3>
                    <?php echo $visits?>
                </h3>

						<p>Visits</p>
					</div>
					<div class="icon">
						<i class="ion ion-android-friends"></i>
					</div>
					<a href="#" class="small-box-footer"> More info <i
						class="fa fa-arrow-circle-right"></i>
					</a>
				</div>
			</div>
			<div class="col-lg-3 col-xs-6">
				<div class="small-box bg-green">
					<div class="inner">
						<h3>
                    <?php echo $bounce ?><sup style="font-size: 20px">%</sup>
						</h3>

						<p>Bounce Rate</p>
					</div>
					<div class="icon">
						<i class="ion ion-arrow-graph-up-right"></i>
					</div>
					<a href="#" class="small-box-footer"> More info <i
						class="fa fa-arrow-circle-right"></i>
					</a>
				</div>
			</div>

			<div class="col-lg-3 col-xs-6">

				<div class="small-box bg-yellow">
					<div class="inner">
						<h3>
                    <?php echo $pageViews?>
                </h3>

						<p>Page Views</p>
					</div>
					<div class="icon">
						<i class="ion ion-document"></i>
					</div>
					<a href="#" class="small-box-footer"> More info <i
						class="fa fa-arrow-circle-right"></i>
					</a>
				</div>
			</div>
			<!-- ./col -->
			<div class="col-lg-3 col-xs-6">
				<!-- small box -->
				<div class="small-box bg-red">
					<div class="inner">
						<h3>0</h3>

						<p>Unique Visitors</p>
					</div>
					<div class="icon">
						<i class="ion ion-pie-graph"></i>
					</div>
					<a href="#" class="small-box-footer"> More info <i
						class="fa fa-arrow-circle-right"></i>
					</a>
				</div>
			</div>

		</div>
		<div class="row">
			<div class="col-xs-12 connectedSortable"></div>
		</div>
		<div class="row">
			<!-- Left col -->
			<section class="col-lg-6 connectedSortable">
                <!-- Map box -->
                <div class="box box-primary">
                    <div class="box-header">
                        <div class="pull-right box-tools">
                        </div>
                        <i class="fa fa-map-marker"></i>
                        <h3 class="box-title">Visitors</h3>
                    </div>
                    <div class="box-body no-padding">
                        <script>



                        </script>
                        <div id="pie" style="height: 300px;"></div>
                    </div>
                </div>
			</section>
			<section class="col-lg-6 connectedSortable">
				<!-- Map box -->
				<div class="box box-primary">
					<div class="box-header">
						<div class="pull-right box-tools">
						</div>
						<i class="fa fa-map-marker"></i>
						<h3 class="box-title">Visitors</h3>
					</div>
					<div class="box-body no-padding">
						<script>



						</script>
						<div id="world-map" style="height: 300px;"></div>
					</div>
				</div>
				<!-- /.box -->
			</section>
		</div>


	</section>

</aside>
<script>
    function init(){
        drawRegionsMap();
        drawPieMap();
    }

    function drawRegionsMap() {
        var jsonData = $.ajax({
            url: "websitestats/worldmap",
            contentType: 'application/json',
            dataType:"json",
            async: false
        }).responseText;
        jsonData = JSON.parse(jsonData);
        var data = jsonData.data;
        var map =  new google.visualization.DataTable();
        map.addRows(data.length);
        map.addColumn('string', 'Country');
        map.addColumn('number', 'Visitors');
        $.each(data, function(index,value) {
            map.setValue(index, 0, value.country);
            map.setValue(index, 1, value.visitors);
        });
        var options = {colorAxis: {colors: ['#009ACB']},chartArea:{left:0,top:0,width:"90%",height:"90%"}};
        var chart = new google.visualization.GeoChart(document.getElementById('world-map'));
        chart.draw(map, options);
    }

    function drawPieMap(){
        var jsonData = $.ajax({
            url: "websitestats/pie",
            contentType: 'application/json',
            dataType:"json",
            async: false
        }).responseText;
        jsonData = JSON.parse(jsonData);
        var map =  new google.visualization.DataTable(jsonData.data);
        map.addRows(2);
        map.addColumn('string', 'Visitor Type');
        map.addColumn('number', 'Visits');
        $.each(jsonData.data, function(index,value) {
            $.each(value ,function(key,val){
                map.setValue(index, 0, key);
                map.setValue(index, 1, val);
            })
        });
        var options = {
            title: 'New Visitor vs Returning Visitors'
        };
        var chart = new google.visualization.PieChart(document.getElementById('pie'));
        chart.draw(map, options);
    }

    google.load('visualization', '1', {'packages': ['geochart','corechart']});
    google.setOnLoadCallback(init);
</script>

<?php include 'footer.php';?>